<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>常用基础几何体 - iThreeJS</title>
		<style type="text/css">
			* {margin:0;padding:0;box-sizing:border-box;}
			html, body {height:100%;overflow:hidden;}
			.container {
				display:flex;
				flex-direction:column;
				padding:5px;
				min-width:1280px;
				min-height:480px;
				width:100%;
				height:100%;
			}
			.row {flex:1;display:flex;margin:5px 0;}
			.cell {flex:1;margin:0 5px;position:relative;}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="row">
				<div class="cell" id="cell"><canvas id="canvas1"></canvas></div>
				<div class="cell"><canvas id="canvas5"></canvas></div>
				<div class="cell"><canvas id="canvas2"></canvas></div>
				<div class="cell"><canvas id="canvas7"></canvas></div>
			</div>
			<div class="row">
				<div class="cell"><canvas id="canvas6"></canvas></div>
				<div class="cell"><canvas id="canvas3"></canvas></div>
				<div class="cell"><canvas id="canvas4"></canvas></div>
				<div class="cell"><canvas id="canvas8"></canvas></div>
			</div>
			<div class="row">
				<div class="cell"><canvas id="canvas12"></canvas></div>
				<div class="cell"><canvas id="canvas9"></canvas></div>
				<div class="cell"><canvas id="canvas10"></canvas></div>
				<div class="cell"><canvas id="canvas11"></canvas></div>
			</div>
		</div>
		
		<script type="text/javascript" src="../../assets/js/three.min.js"></script>
		<script type="text/javascript" src="../../assets/js/controls/OrbitControls.js"></script>
		<script type="text/javascript">
			/*
			 * 全局常量
			 */
			const w = document.getElementById("cell").clientWidth;
			const h = document.getElementById("cell").clientHeight;
			const k = w / h;
			const s = 100; //场景显示范围控制系数，系数越大，显示的范围越大
			
			/*
			 * BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
			 */
			let scene1 = new THREE.Scene();
			let geometry1 = new THREE.BoxGeometry(80, 80, 80);
			let material1 = new THREE.MeshNormalMaterial();
			let mesh1 = new THREE.Mesh(geometry1, material1);
			scene1.add(mesh1);
			let camera1 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera1.position.set(200, 300, 200); //设置照相机位置
			camera1.lookAt(scene1.position);
			let renderer1 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas1")
			});
			renderer1.setSize(w, h);
			renderer1.setClearColor(0x000000, 1);
			function render1() {renderer1.render(scene1, camera1);}
			render1();
			let ctrl1 = new THREE.OrbitControls(camera1, renderer1.domElement);
			ctrl1.addEventListener("change", render1);
			
			/*
			 * CircleGeometry(radius, segments, thetaStart, thetaLength)
			 * radius: 圆形半径，默认值为1
			 * segments: 分段（三角面）的数量，最小为3， 默认值为8
			 * thetaStart: 第一个分段的起始角度，默认为0
			 * thetaLength: 圆形扇区的中心角，默认为2*PI
			 */
			let scene2 = new THREE.Scene();
			let geometry2 = new THREE.CircleGeometry(80, 32);
			let material2 = new THREE.MeshNormalMaterial();
			let mesh2 = new THREE.Mesh(geometry2, material2);
			scene2.add(mesh2);
			let camera2 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera2.position.set(200, 300, 200); //设置照相机位置
			camera2.lookAt(scene2.position);
			let renderer2 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas2")
			});
			renderer2.setSize(w, h);
			renderer2.setClearColor(0x000000, 1);
			function render2() {renderer2.render(scene2, camera2);}
			render2();
			let ctrl2 = new THREE.OrbitControls(camera2, renderer2.domElement);
			ctrl2.addEventListener("change", render2);
			
			/*
			 * 圆锥
			 * ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)
			 */
			let scene3 = new THREE.Scene();
			let geometry3 = new THREE.ConeGeometry(50, 100, 16);
			let material3 = new THREE.MeshNormalMaterial();
			let mesh3 = new THREE.Mesh(geometry3, material3);
			scene3.add(mesh3);
			let camera3 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera3.position.set(200, 300, 200); //设置照相机位置
			camera3.lookAt(scene3.position);
			let renderer3 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas3")
			});
			renderer3.setSize(w, h);
			renderer3.setClearColor(0x000000, 1);
			function render3() {renderer3.render(scene3, camera3);}
			render3();
			let ctrl3 = new THREE.OrbitControls(camera3, renderer3.domElement);
			ctrl3.addEventListener("change", render3);
			
			/*
			 * 圆柱
			 * CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)
			 */
			let scene4 = new THREE.Scene();
			let geometry4 = new THREE.CylinderGeometry(50, 50, 100, 32);
			let material4 = new THREE.MeshNormalMaterial();
			let mesh4 = new THREE.Mesh(geometry4, material4);
			scene4.add(mesh4);
			let camera4 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera4.position.set(200, 300, 200); //设置照相机位置
			camera4.lookAt(scene4.position);
			let renderer4 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas4")
			});
			renderer4.setSize(w, h);
			renderer4.setClearColor(0x000000, 1);
			function render4() {renderer4.render(scene4, camera4);}
			render4();
			let ctrl4 = new THREE.OrbitControls(camera4, renderer4.domElement);
			ctrl4.addEventListener("change", render4);
			
			/*
			 * 平面
			 * PlaneGeometry(width, height, widthSegments, heightSegments)
			 */
			let scene5 = new THREE.Scene();
			let geometry5 = new THREE.PlaneGeometry(120, 60);
			let material5 = new THREE.MeshNormalMaterial();
			let mesh5 = new THREE.Mesh(geometry5, material5);
			scene5.add(mesh5);
			let camera5 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera5.position.set(200, 300, 200); //设置照相机位置
			camera5.lookAt(scene5.position);
			let renderer5 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas5")
			});
			renderer5.setSize(w, h);
			renderer5.setClearColor(0x000000, 1);
			function render5() {renderer5.render(scene5, camera5);}
			render5();
			let ctrl5 = new THREE.OrbitControls(camera5, renderer5.domElement);
			ctrl5.addEventListener("change", render5);
			
			/*
			 * 球体
			 * SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
			 */
			let scene6 = new THREE.Scene();
			let geometry6 = new THREE.SphereGeometry(80, 60, 60);
			let material6 = new THREE.MeshNormalMaterial();
			let mesh6 = new THREE.Mesh(geometry6, material6);
			scene6.add(mesh6);
			let camera6 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera6.position.set(200, 300, 200); //设置照相机位置
			camera6.lookAt(scene6.position);
			let renderer6 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas6")
			});
			renderer6.setSize(w, h);
			renderer6.setClearColor(0x000000, 1);
			function render6() {renderer6.render(scene6, camera6);}
			render6();
			let ctrl6 = new THREE.OrbitControls(camera6, renderer6.domElement);
			ctrl6.addEventListener("change", render6);
			
			/*
			 * 二维圆环
			 * RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)
			 */
			let scene7 = new THREE.Scene();
			let geometry7 = new THREE.RingGeometry(40, 80, 12);
			let material7 = new THREE.MeshNormalMaterial();
			let mesh7 = new THREE.Mesh(geometry7, material7);
			scene7.add(mesh7);
			let camera7 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera7.position.set(200, 300, 200); //设置照相机位置
			camera7.lookAt(scene7.position);
			let renderer7 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas7")
			});
			renderer7.setSize(w, h);
			renderer7.setClearColor(0x000000, 1);
			function render7() {renderer7.render(scene7, camera7);}
			render7();
			let ctrl7 = new THREE.OrbitControls(camera7, renderer7.domElement);
			ctrl7.addEventListener("change", render7);
			
			/*
			 * 三维圆环
			 * TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
			 */
			let scene8 = new THREE.Scene();
			let geometry8 = new THREE.TorusGeometry(70, 20, 12, 12);
			let material8 = new THREE.MeshNormalMaterial();
			let mesh8 = new THREE.Mesh(geometry8, material8);
			scene8.add(mesh8);
			let camera8 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera8.position.set(200, 300, 200); //设置照相机位置
			camera8.lookAt(scene8.position);
			let renderer8 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas8")
			});
			renderer8.setSize(w, h);
			renderer8.setClearColor(0x000000, 1);
			function render8() {renderer8.render(scene8, camera8);}
			render8();
			let ctrl8 = new THREE.OrbitControls(camera8, renderer8.domElement);
			ctrl8.addEventListener("change", render8);
			
			/*
			 * 四面体
			 * TetrahedronGeometry(radius, detail)
			 */
			let scene12 = new THREE.Scene();
			let geometry12 = new THREE.TetrahedronGeometry(80);
			let material12 = new THREE.MeshNormalMaterial();
			let mesh12 = new THREE.Mesh(geometry12, material12);
			scene12.add(mesh12);
			let camera12 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera12.position.set(200, 300, 200); //设置照相机位置
			camera12.lookAt(scene12.position);
			let renderer12 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas12")
			});
			renderer12.setSize(w, h);
			renderer12.setClearColor(0x000000, 1);
			function render12() {renderer12.render(scene12, camera12);}
			render12();
			let ctrl12 = new THREE.OrbitControls(camera12, renderer12.domElement);
			ctrl12.addEventListener("change", render12);
			
			/*
			 * 八面体
			 * OctahedronGeometry(radius, detail)
			 */
			let scene9 = new THREE.Scene();
			let geometry9 = new THREE.OctahedronGeometry(80);
			let material9 = new THREE.MeshNormalMaterial();
			let mesh9 = new THREE.Mesh(geometry9, material9);
			scene9.add(mesh9);
			let camera9 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera9.position.set(200, 300, 200); //设置照相机位置
			camera9.lookAt(scene9.position);
			let renderer9 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas9")
			});
			renderer9.setSize(w, h);
			renderer9.setClearColor(0x000000, 1);
			function render9() {renderer9.render(scene9, camera9);}
			render9();
			let ctrl9 = new THREE.OrbitControls(camera9, renderer9.domElement);
			ctrl9.addEventListener("change", render9);
			
			/*
			 * 十二面体
			 * DodecahedronGeometry(radius, detail)
			 * radius: 十二面体的半径，默认值为1
			 * detail: 默认值为0，设置为大于0的整数将会为其增加一些顶点，使其不再是十二面体
			 */
			let scene10 = new THREE.Scene();
			let geometry10 = new THREE.DodecahedronGeometry(80);
			let material10 = new THREE.MeshNormalMaterial();
			let mesh10 = new THREE.Mesh(geometry10, material10);
			scene10.add(mesh10);
			let camera10 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera10.position.set(200, 300, 200); //设置照相机位置
			camera10.lookAt(scene10.position);
			let renderer10 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas10")
			});
			renderer10.setSize(w, h);
			renderer10.setClearColor(0x000000, 1);
			function render10() {renderer10.render(scene10, camera10);}
			render10();
			let ctrl10 = new THREE.OrbitControls(camera10, renderer10.domElement);
			ctrl10.addEventListener("change", render10);
			
			/*
			 * 二十面体
			 * IcosahedronGeometry(radius, detail)
			 */
			let scene11 = new THREE.Scene();
			let geometry11 = new THREE.IcosahedronGeometry(80);
			let material11 = new THREE.MeshNormalMaterial();
			let mesh11 = new THREE.Mesh(geometry11, material11);
			scene11.add(mesh11);
			let camera11 = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera11.position.set(200, 300, 200); //设置照相机位置
			camera11.lookAt(scene11.position);
			let renderer11 = new THREE.WebGLRenderer({
				canvas: document.getElementById("canvas11")
			});
			renderer11.setSize(w, h);
			renderer11.setClearColor(0x000000, 1);
			function render11() {renderer11.render(scene11, camera11);}
			render11();
			let ctrl11 = new THREE.OrbitControls(camera11, renderer11.domElement);
			ctrl11.addEventListener("change", render11);
		</script>
	</body>
</html>